<template>
  <setting-public-view current="instock" :nav="sparepartNav">
    <div class="setting-box-warp sparepartInstock">
      <div class="setting-box">    
        <div class="box-title">
          <p>{{$t('sparepart.setting.instock.title1')}}</p>
        </div>
        <div class="box-body">
          <div class="box-item">
            <el-table
            header-row-class-name="common-list-table-header__v2"
                class="item-table"
                :data="inStoreType"
                :max-height="winHeight"
                border
                style="width: 100%">
                <el-table-column
                  type="index"
                  :label="$t('common.base.SN')"
                  width="60"
                  align="center"
                  :index="(val)=>val+1">
                </el-table-column>
                <el-table-column
                  min-width="100"
                  :label="$t('common.base.name')">
                  <template slot-scope="scope">
                    <p>{{scope.row}}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  :label="$t('common.base.operation')">
                  <template slot-scope="scope">
                    <!-- <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"></i>
                    <i class="el-icon-sort-up"></i>
                    <i class="el-icon-sort-down"></i> -->
                    <el-button type="text" @click="editModalShow('inStoreType',scope.row)">{{$t('common.base.edit')}}</el-button>
                    <el-button type="text" @click="delHandle('inStoreType',scope.row)">{{$t('common.base.delete')}}</el-button>
                    <el-button type="text" @click="moveUpHandle('inStoreType',scope.row,scope.$index)" v-if="scope.$index>0">{{$t('common.base.moveUp')}}</el-button>
                    <el-button type="text" @click="moveDownHandle('inStoreType',scope.row,scope.$index)" v-if="scope.$index<inStoreType.length-1">{{$t('common.base.moveDown')}}</el-button>  
                  </template>
                </el-table-column>
            </el-table> 
            <div class="instock-add">
              <el-input :placeholder="$t('sparepart.setting.instock.pla1')" v-model="newInStoreType"></el-input>
              <base-button type="primary" @event="addHandle('inStoreType')" :disabled="isNewInStoreType?false:true">{{$t('common.base.addModule', {module:''})}}</base-button>
            </div> 
          </div>
        </div>
      </div>
      <div class="setting-box">    
        <div class="box-title">
          <p>{{$t('sparepart.setting.instock.title2')}}</p>
        </div>
        <div class="box-body">
          <div class="box-item">
            <el-table
            header-row-class-name="common-list-table-header__v2"
                class="item-table"
                :data="outStoreType"
                :max-height="winHeight"
                border
                style="width: 100%">
                <el-table-column
                  type="index"
                  :label="$t('common.base.SN')"
                  width="60"
                  align="center"
                  :index="(val)=>val+1">
                </el-table-column>
                <el-table-column
                  min-width="100"
                  :label="$t('common.base.name')">
                  <template slot-scope="scope">
                    <p>{{scope.row}}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  :label="$t('common.base.operation')">
                  <template slot-scope="scope">
                    <!-- <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"></i>
                    <i class="el-icon-sort-up"></i>
                    <i class="el-icon-sort-down"></i> -->
                    <el-button type="text" @click="editModalShow('outStoreType',scope.row)">{{$t('common.base.edit')}}</el-button>
                    <el-button type="text" @click="delHandle('outStoreType',scope.row)">{{$t('common.base.delete')}}</el-button>
                    <el-button type="text" @click="moveUpHandle('outStoreType',scope.row,scope.$index)" v-if="scope.$index>0">{{$t('common.base.moveUp')}}</el-button>
                    <el-button type="text" @click="moveDownHandle('outStoreType',scope.row,scope.$index)" v-if="scope.$index<outStoreType.length-1">{{$t('common.base.moveDown')}}</el-button>  
                  </template>
                </el-table-column>
            </el-table> 
            <div class="instock-add">
              <el-input :placeholder="$t('sparepart.setting.instock.pla2')" v-model="newOutStoreType"></el-input>
              <base-button type="primary" @event="addHandle('outStoreType')" :disabled="isNewOutStoreType?false:true">{{$t('common.base.addModule',{module:''})}}</base-button>
            </div>
          </div>
        </div>
      </div>

      <div class="setting-box">    
        <div class="box-title">
          <p>{{$t('sparepart.setting.instock.title3')}}</p>
        </div>
        <div class="box-body">
          <div class="box-item">
            <el-table
            header-row-class-name="common-list-table-header__v2"
                class="item-table"
                :data="unit"
                :max-height="winHeight"
                border
                style="width: 100%">
                <el-table-column
                  type="index"
                  :label="$t('common.base.SN')"
                  width="60"
                  align="center"
                  :index="(val)=>val+1">
                </el-table-column>
                <el-table-column
                  min-width="100"
                  :label="$t('common.base.name')">
                  <template slot-scope="scope">
                    <p>{{scope.row}}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  :label="$t('common.base.operation')">
                  <template slot-scope="scope">
                    <!-- <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"></i>
                    <i class="el-icon-sort-up"></i>
                    <i class="el-icon-sort-down"></i> -->
                    <el-button type="text" @click="editModalShow('unit',scope.row)">{{$t('common.base.edit')}}</el-button>
                    <el-button type="text" @click="delHandle('unit',scope.row)">{{$t('common.base.delete')}}</el-button>
                    <el-button type="text" @click="moveUpHandle('unit',scope.row,scope.$index)" v-if="scope.$index>0">{{$t('common.base.moveUp')}}</el-button>
                    <el-button type="text" @click="moveDownHandle('unit',scope.row,scope.$index)" v-if="scope.$index<unit.length-1">{{$t('common.base.moveDown')}}</el-button>  
                  </template>
                </el-table-column>
            </el-table> 
            <div class="instock-add">
              <el-input :placeholder="$t('sparepart.setting.instock.pla3')" v-model="newUnit"></el-input>
              <base-button type="primary" @event="addHandle('unit')" :disabled="isNewUnit?false:true">{{$t('common.base.addModule',{module:''})}}</base-button>
            </div>
          </div>
        </div>
      </div>

      <div class="setting-box">    
        <div class="box-title">
          <p>{{$t('sparepart.setting.instock.title4')}}</p>
        </div>
        <div class="box-body">
          <div class="box-item">
            <el-table
            header-row-class-name="common-list-table-header__v2"
                class="item-table"
                :data="sparepartType"
                :max-height="winHeight"
                border
                style="width: 100%">
                <el-table-column
                  type="index"
                  :label="$t('common.base.SN')"
                  width="60"
                  align="center"
                  :index="(val)=>val+1">
                </el-table-column>
                <el-table-column
                  min-width="100"
                  :label="$t('common.base.name')">
                  <template slot-scope="scope">
                    <p>{{scope.row}}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  :label="$t('common.base.operation')">
                  <template slot-scope="scope">
                    <!-- <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"></i>
                    <i class="el-icon-sort-up"></i>
                    <i class="el-icon-sort-down"></i> -->
                    <el-button type="text" @click="editModalShow('sparepartType',scope.row)">{{$t('common.base.edit')}}</el-button>
                    <el-button type="text" @click="delHandle('sparepartType',scope.row)">{{$t('common.base.delete')}}</el-button>
                    <el-button type="text" @click="moveUpHandle('sparepartType',scope.row,scope.$index)" v-if="scope.$index>0">{{$t('common.base.moveUp')}}</el-button>
                    <el-button type="text" @click="moveDownHandle('sparepartType',scope.row,scope.$index)" v-if="scope.$index<sparepartType.length-1">{{$t('common.base.moveDown')}}</el-button>  
                  </template>
                </el-table-column>
            </el-table> 
            <div class="instock-add">
              <el-input :placeholder="$t('sparepart.setting.instock.pla4')" v-model="newSparepartType"></el-input>
              <base-button type="primary" @event="addHandle('sparepartType')" :disabled="isNewSparepartType?false:true">{{$t('common.base.addModule', {module:''})}}</base-button>
            </div>
          </div>
        </div>
      </div>

      <div class="setting-box">    
        <div class="box-title">
          <p>{{$t('sparepart.setting.instock.title5')}}</p>
        </div>
        <div class="box-body">
          <div class="box-item">
            <div>
              <p style="float:left" class="item-title">{{$t('sparepart.setting.instock.des1')}}</p>
              <div style="float:right">
                <el-radio-group v-model="precision" @change="precisionChange">
                  <el-radio :label="0">{{$t('sparepart.setting.instock.label1')}}</el-radio>
                  <el-radio :label="1">{{$t('sparepart.setting.instock.label2')}}</el-radio>
                  <el-radio :label="2">{{$t('sparepart.setting.instock.label3')}}</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑弹窗 start -->
    <base-modal :title="editModalTitle" :show.sync="isEditModal" width="700px" class="setting-public-dialog">
      <div class="modal_box">
        <el-input v-model="editText" :maxlength="50" :placeholder="currentItem"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <base-button type="ghost" @event="isEditModal = false">{{$t('common.base.close')}}</base-button>
        <base-button type="primary" @event="saveEdit">{{$t('common.base.save')}}</base-button>
      </div>
    </base-modal>
    <!-- 编辑弹窗 end -->
  </setting-public-view>
</template>
<script>
/* api */
import * as SettingApi from '@src/api/SettingApi.ts';

/* util */
import Platform from '@src/util/platform';

/* components */
import SettingPublicView from '../../components/settingPublicView';
import {sparepartNav} from '../../components/settingPublicView/navList.js';
import i18n from '@src/locales'

export default {
  name: 'sparepart-instock',
  props: {
    
  },
  data(){
    return {
      sparepartNav:sparepartNav,
      winHeight:null,
      precision:'',//备件出入库单位设置

      inStoreType:[],//入库类型
      outStoreType:[],//出库类型
      unit:[],//备件单位
      sparepartType:[],//备件类别选项
      newInStoreType:'',//入库类型
      newOutStoreType:'',//出库类型
      newUnit:'',//备件单位
      newSparepartType:'',//备件类别选项
      saveApis:{
        inStoreType:'saveSparepartInstock',
        outStoreType:'saveSparepartOutstock',
        unit:'saveSparepartUnit',
        sparepartType:'saveSparepartType',
      },
      newTxts:{
        inStoreType:'newInStoreType',
        outStoreType:'newOutStoreType',
        unit:'newUnit',
        sparepartType:'newSparepartType',
      },
      typeTxts:{
        inStoreType:i18n.t('sparepart.setting.instock.title1'),
        outStoreType:i18n.t('sparepart.setting.instock.title2'),
        unit:i18n.t('sparepart.setting.instock.des2'),
        sparepartType:i18n.t('sparepart.setting.instock.des3'),
      },
      isEditModal:false,
      editModalTitle:'',
      currentItem:{},
      currentType:'',
      editText:'',
    }
  },
  mounted(){
    this.winHeight=window.innerHeight-180;
    this.getConfigData();//获取设置信息
  },
  components: {
    [SettingPublicView.name]: SettingPublicView
  },
  computed:{
    isNewInStoreType(){
      let arr=this.newInStoreType.split(',')||[];
      arr=arr.map(x=>{
        return x.replace(/^\s*|\s*$/g,"");
      }).filter(x=>x);
      return arr.length>0;
    },
    isNewOutStoreType(){
      let arr=this.newOutStoreType.split(',')||[];
      arr=arr.map(x=>{
        return x.replace(/^\s*|\s*$/g,"");
      }).filter(x=>x);
      return arr.length>0;
    },
    isNewUnit(){
      let arr=this.newUnit.split(',')||[];
      arr=arr.map(x=>{
        return x.replace(/^\s*|\s*$/g,"");
      }).filter(x=>x);
      return arr.length>0;
    },
    isNewSparepartType(){
      let arr=this.newSparepartType.split(',')||[];
      arr=arr.map(x=>{
        return x.replace(/^\s*|\s*$/g,"");
      }).filter(x=>x);
      return arr.length>0;
    },
  },
  watch:{
    isEditModal(newVal,oldVal){
      if(!newVal){
        this.editText='';
      }
    },
  },
  methods:{
    //获取设置信息
    getConfigData(data){
      if(data){
        this.configDataHandle(data);
      }else{
        SettingApi.getTenantConfigData().then((res) =>{
          if(res&&res.data){
            this.configDataHandle(res.data);
          }
        }).catch((err)=>{
          console.log(err)
        });
      }
    },
    configDataHandle(data={}){
      this.configData=data;
      let {sparePartConfig={}}=data;
      //入库类型
      this.inStoreType=sparePartConfig.inStoreType||[];
      //出库类型
      this.outStoreType=sparePartConfig.outStoreType||[];
      //备件单位
      this.unit=sparePartConfig.unit||[];
      //备件类别选项
      this.sparepartType=sparePartConfig.sparepartType||[];
      //
      this.precision=sparePartConfig.precision;
    },

    //保存设置
    saveSetting(type,data,callback){
      let saveApi=this.saveApis[type];
      if(!saveApi) return;
      SettingApi[saveApi](data).then((res) =>{
        if(res&&res.data){
          this.configDataHandle(res.data);
          this[this.newTxts[type]]='';
          callback && callback();
        }
      }).catch((err)=>{
        console.log(err)
      });
    },

    addHandle(type){
      let oldArr=this[type]||[];;
      let newArr=[];
      if(type=="inStoreType"){
        newArr=this.newInStoreType.split(',');
      }else if(type=="outStoreType"){
        newArr=this.newOutStoreType.split(',');
      }else if(type=="unit"){
        newArr=this.newUnit.split(',');
      }else if(type=="sparepartType"){
        newArr=this.newSparepartType.split(',');
      }
      let isGobeyond=false;
      newArr=newArr.map(x=>{
        return x.replace(/^\s*|\s*$/g,"");
      }).filter(x=>{
        if(x.length>50){
          isGobeyond=true;
        }
        return x;
      });
      let arr=[...oldArr,...newArr]
      let data=[...new Set(arr)];
      console.log('addHandle:',data);
      if(arr.length!=data.length){
        Platform.alert(this.$t('sparepart.setting.instock.tips1'))
      }else if(isGobeyond){
        Platform.alert(this.$t('sparepart.setting.instock.tips2'))
        // this.$confirm('选项名称过长，是否继续?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   this.saveSetting(type,{data:data.filter(x=>x)})
        // }).catch(() => {});
      }else{
        this.saveSetting(type,{data:data.filter(x=>x)})
      }
    }, 
    editModalShow(type,item){
      this.editModalTitle=this.typeTxts[type]+ this.$t('sparepart.setting.instock.tips3');
      this.currentType=type;
      this.currentItem=item;
      this.isEditModal=true;
    }, 
    saveEdit(){
      let list=this[this.currentType]||[];
      if(!this.editText){
        Platform.alert(this.$t('sparepart.setting.instock.tips4'))
        return;
      }else if(list.includes(this.editText)){
        Platform.alert(this.$t('sparepart.setting.instock.tips5'))
        return;
      }
      let arr=list.map(item=>(item==this.currentItem?this.editText:item));
      this.saveSetting(this.currentType,{data:arr},()=>{
        this.isEditModal=false;
      });
    }, 
    delHandle(type,item){
      let arr=this[type]||[];
      if(arr.length>1){
        this.$confirm(this.$t('sparepart.setting.instock.tips6'), this.$t('common.base.toast'), {
          confirmButtonText: this.$t('common.base.confirm'),
          cancelButtonText: this.$t('common.base.cancel'),
          type: 'warning'
        }).then(() => {
          this.saveSetting(type,{data:arr.filter(x=>x!=item)});
        }).catch(() => {});
      }else{
        Platform.alert(this.$t('sparepart.setting.instock.tips7'))
      }
      
    },  
    moveUpHandle(type,item,index){
      this.sortHandle(type,item,index,-1);
      
    },  
    moveDownHandle(type,item,index){
      this.sortHandle(type,item,index,1)
    },
    sortHandle(type,item,index,num){
      let arr=this[type]||[];
      let txt=item;
      arr[index]=arr[index+num]
      arr[index+num]=txt;
      this.saveSetting(type,{data:arr});
    },
    precisionChange(value){
      SettingApi.saveSparepartPrecision({precision:value}).then((res) =>{
        this.configDataHandle(res.data);
      }).catch((err)=>{
        this.configDataHandle();
      });
    }
    
  }
}
</script>

<style lang="scss">
.sparepartInstock{
  .el-table{
    .cell{
      height: auto!important;;
      p{
        line-height: 20px;
        height: auto;
        padding: 10px 0;
      }
    }
  }
}
.instock-add {
  margin-top: 10px;
  position: relative;
  padding-right: 60px;
  .el-input{
    width: 100%;
  }
  .base-button{
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>